<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            box-sizing: border-box;
        }

        .vc-switch-wrapper {
            --width: 44px;
            --height: 26px;
            --slider-width: 16px;
            --slider-top: calc(calc(var(--height) - var(--slider-width)) / 2);
            width: var(--width);
            height: var(--height);
            border: none;
            border-radius: 999999px;
            position: relative;
        }

        .vc-switch-wrapper .vc-switch-inner {
            width: 100%;
            height: 100%;
            border-radius: 999999px;
            background-color: #50545f;
        }

        .vc-switch-wrapper input[type="checkbox"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            opacity: 0;
        }

        .vc-switch-slider {
            width: var(--slider-width);
            height: var(--slider-width);
            display: inline-block;
            border-radius: 50%;
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: var(--slider-top);
            left: var(--slider-top);
            z-index: 2;
            transition: left .2s ease-in-out;
        }


        .vc-switch-wrapper input[type="checkbox"]:checked~.vc-switch-inner {
            background-color: rgb(66, 205, 105);
        }

        .vc-switch-wrapper input[type="checkbox"]:checked~.vc-switch-slider {
            left: calc(var(--width) - var(--slider-top) - var(--slider-width))
        }
    </style>
    <div class="vc-switch-wrapper">
        <input type="checkbox">
        <div class="vc-switch-slider"></div>
        <div class="vc-switch-inner">
        </div>
    </div>


    <script>

    </script>
</body>

</html>